<template>
  <div class="bg-white">
    <template v-for="(item, index) in plateList" :key="item.id">
      <h2 :id="'accordion-collapse-heading-' + index">
        <button
          type="button"
          @click="click(index)"
          class="flex w-full items-center justify-between rounded-xl border border-l-4 border-gray-200 border-l-red-500 p-3 text-left"
        >
          <div>
            <h5 class="text-lg text-red-500">
              <span>{{ item.name }}</span>
              <span class="ml-8 mr-2 rounded px-2.5 py-0.5 text-sm text-white" :class="item.core_avg_pcp > 0 ? 'bg-red-500' : 'bg-green-600'">
                {{ (item.core_avg_pcp * 100).toFixed(2) }}%
              </span>
            </h5>
            <div class="mt-2">{{ item.description }}</div>
          </div>
          <div class="flex">
            <span class="mr-2 rounded-full bg-red-500 px-2.5 py-0.5 text-sm text-white">
              {{ item.plates.length }}
            </span>
            <svg data-accordion-icon class="h-3 w-3 shrink-0 rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
            </svg>
          </div>
        </button>
      </h2>
      <div :id="'accordion-collapse-body-' + index" class="hidden border-l-2 border-dashed">
        <table class="text-left">
          <thead class="border-b text-lg">
            <tr>
              <th scope="col" class="px-4 py-2">股票</th>
              <th scope="col" class="px-4 py-2">价格</th>
              <th scope="col" class="px-4 py-2">涨幅</th>
              <th scope="col" class="whitespace-nowrap px-4 py-2">涨停时间</th>
              <th scope="col" class="px-4 py-2">换手</th>
              <th scope="col" class="px-4 py-2">流通市值</th>
              <th scope="col" class="px-4 py-2">解读</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item1, index1) in item.plates" :key="item1.index1" class="border-b">
              <td class="whitespace-nowrap px-4 py-2">
                <Stock :symbol="item1[0]" type="hotpoint" :name="item1[1]" :desc="item1[11]"></Stock>
              </td>
              <td class="cursor-pointer px-4 py-2 text-right font-semibold text-red-500">
                {{ item1[2].toFixed(2) }}
              </td>
              <td class="px-4 py-2 text-right">
                <ChangePercent :percent="item1[3]"></ChangePercent>
              </td>
              <td class="px-4 py-2">{{ Utils.formatDateTime(item1[6]) }}</td>
              <td class="px-4 py-2 text-right font-semibold">{{ (item1[10] * 100).toFixed(2) }}%</td>
              <td class="whitespace-nowrap px-4 py-2 text-right font-semibold">
                {{ Utils.bigNumberTransform(item1[4], 'type') }}
              </td>
              <td class="whitespace-wrap px-4 py-2 text-sm">{{ item1[5] }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
  </div>
</template>
<script setup>
import axios from 'axios';
import Utils from '../utils/index';
import { ref, nextTick } from 'vue';
import { Accordion } from 'flowbite';
const plateList = ref([]);
const accordion = ref();

function fetchBk() {
  return axios.get('https://flash-api.xuangubao.cn/api/surge_stock/plates');
}
function fetchGu() {
  return axios.get('https://flash-api.xuangubao.cn/api/surge_stock/stocks?normal=true&uplimit=true');
}
function fetchBkDetail(str) {
  return axios.get('https://flash-api.xuangubao.cn/api/plate/data?fields=core_avg_pcp,plate_name&plates=' + str);
}

async function fetchData() {
  let bkRes = await fetchBk();
  let guRes = await fetchGu();
  if (!bkRes.data.data.items) return;
  let result = bkRes.data.data.items.filter((e) => e.description && e.id > 1);
  let guList = guRes.data.data.items;
  let str = result.map((e) => e.id).join(',');
  let bkDetailRes = await fetchBkDetail(str);
  let bkDetailList = bkDetailRes.data.data;

  //重新组织数据
  for (let i = 0; i < result.length; i++) {
    let id = result[i].id;
    //从热点股票中选出匹配的板块
    let items = guList.filter((e) => {
      let list = e[8];
      for (let j = 0; j < list.length; j++) {
        if (list[j].id == id) {
          return true;
        }
      }
    });
    result[i].plates = items;
    result[i].core_avg_pcp = bkDetailList[id].core_avg_pcp;
  }
  result = result.sort(Utils.compare('core_avg_pcp'));

  plateList.value = result.slice(0, 8);
  nextTick((e) => {
    createAccordion();
  });
}

function click(index) {
  if (document.querySelector('#accordion-collapse-heading-0')) {
    accordion.open('accordion-collapse-heading-' + index);
  }
}
function createAccordion() {
  let accordionItems = [];
  for (let i = 0; i < plateList.value.length; i++) {
    accordionItems.push({
      id: 'accordion-collapse-heading-' + i,
      triggerEl: document.querySelector('#accordion-collapse-heading-' + i),
      targetEl: document.querySelector('#accordion-collapse-body-' + i),
      active: false,
    });
  }
  accordion.value = new Accordion(accordionItems);
}

defineExpose({
  fetchData,
});
</script>
